<template>
  <div class="indextab">
    <div class="box" :style="jgh" @scroll="scroll()" ref="egz">
      <div v-for="(v, k) in arr" :key="k">
        <h3>
          {{ k }}
        </h3>
        <p v-for="i in v.db" :key=" i[setopt.sel]"  class="cname" @click="tab(i)">
          {{ i[setopt.sel] }}
        </p>
      </div>

      
    </div>
    <!-- 侧边索引 -->
      <div class="side" :style="jgh">
        <div v-for="(v, k) in arr" :key="k" class="sit" @click="suoy(v.dh)">
          <b class="bit" :style="`background:${t==v.dh?gl.bgcolor?gl.bgcolor:'yellowgreen':''};color:${t==v.dh?gl.color?gl.color:'white':''}`">
            {{ k }}
          </b>          
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // arr:[]
      dharr:[],
      t:0
      
    };
  },
  computed: {
    arr() {
      let en = [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ];
      let enobj = {}; // 字母排序
      let otobj = {}; // 其他排序
      let enres = {}; // 字母排序结果
      let otres = {}; // 其他排序结果
      let res = {}; // 总排序结果
      let d=0// 每一类选项高度
      let h=0// 索引高度

      this.list.forEach((v, k) => {
        //    console.log(v.short)
        let i = v[this.setopt["index"]].toLocaleUpperCase();
        // let i = v.short.toLocaleUpperCase();
        //    console.log(i)
        if (en.includes(i)) {
          if (enobj[i]) {
            enobj[i].push(v);
          } else {
            enobj[i] = [v];
          }
        } else {
          if (otobj[i]) {
            otobj[i].push(v);
          } else {
            otobj[i] = [v];
          }
        }
      });
      // console.log(otobj);
      let enkeyarr = Object.keys(enobj);
      let otkeyarr = Object.keys(otobj);
      enkeyarr.sort(); // 排序
      otkeyarr.sort(); // 排序
      enkeyarr.forEach((v, k) => {
        // abc  排序后重新赋值
        enres[v] = enobj[v];
      });
      otkeyarr.forEach((v, k) => {
        // abc  排序后重新赋值
        otres[v] = otobj[v];
      });
      res = { ...otres, ...enres };
    //   console.log(res);
      for(let k in res){
          let rb={}
          rb.db=res[k]
          rb.dh=(d+h)
          h+=30
          d+=30*rb.db.length
          res[k]=rb
          this.dharr.push(rb.dh)
      }
    //   console.log(res);
      return res;
    },
    jgh() {// 高度重计算
      return "height:" + this.height + "px";
    },
    
  },
  props: ["list", "height","gl","setopt"],
  methods: {
      tab(v){// 选项
        //   console.log(v);
        this.$emit("egz",v)
      },
      scroll(){// 滚动条事件
        //   console.log(this.$refs.egz.scrollTop);
        this.dharr.forEach((v,k)=>{
            if(this.$refs.egz.scrollTop>=this.dharr[k]&&this.$refs.egz.scrollTop<=this.dharr[k+1]){
                   this.t=v
                }
            })
      },
      suoy(v){// 侧边索引
        //   console.log(this.dharr);
        this.$refs.egz.scrollTop=v
      }
  }
};
</script>

<style scoped="scoped">


    .box{
        overflow:auto;
        position: relative;
    }
    h3{
        margin: 0;
        padding: 0;
        background: gainsboro;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        padding-left: 5px;
    }
    .cname{
        height: 30px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background: white;
        line-height: 30px;
        border-bottom: 1px solid gainsboro;
    }
    .side{
        position:absolute;
        width:30px;        
        top:0;
        right:5px;
        display:flex;
        flex-direction:column
    }
    .sit{
        text-align:center;                                  
        flex:1;
        display:flex;
        align-items:center;
        justify-content:center;
        margin: 0;
        padding: 0;
    }
    .bit{
        display:inline-block;
        width:18px;
        height:18px;
        border-radius:50%;
        line-height:18px;
        text-align:center
    }
    .indextab{
        position: relative;
    }
</style>